<template>
    <div>
        分类：
        <el-select clearable v-model="kami.category" @change="()=>seaGood()" class="m-2" placeholder="切换类型" size="large" style="margin-right:50px;">
            <el-option v-for="item in mon" :key="item" :label="item" :value="item" />
        </el-select>
        搜索：
        <el-input v-model="kami.search" placeholder="请输入关键字" style="width:240px;margin-right: 20px;"></el-input>
        <el-button @click="seaGood">搜索</el-button>
    </div>
    <el-table :data="list" style="width: 100%" v-loading="loading">
        <el-table-column prop="proid" label="图片编号" width="200" />
        <el-table-column label="图片" width="100">
            <template #default="scope">
                <img class="img" :src="scope.row.img1" />
            </template>
        </el-table-column>
        <el-table-column prop="proname" label="名称" width="200" />
        <el-table-column prop="brand" label="品牌" width="160" />
        <el-table-column prop="originprice" label="价格" width="80" />
        <el-table-column prop="discount" label="折扣" width="80" />
        <el-table-column prop="sales" label="销量" width="100" />
        <el-table-column prop="stock" label="库存" width="100" />
        <el-table-column label="是否推荐">
            <template #default="scope">
                <el-switch v-model="scope.row.isrecommend" :active-value="1" :inactive-value="0" @change="(val: string) => swits(val, scope.row.proid, 'isrecommend')"/>
            </template>
        </el-table-column>
    </el-table>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import service from "../../../until/service";
import {useRouteStore} from "../../../piniaStore/index"
const routeStore = useRouteStore();
const loading = ref(routeStore.loading)
const mon = reactive<string[]>([])
const getmon = () => {
    loading.value = true
    service({
        url: '/pro/getCategory'
    }).then(res => {
        if (res.data.code === '200') {
    loading.value = false
            mon.length = 0
            mon.push(...res.data.data)
        }
    })
}
getmon()
interface IGoods {
    brand: string,
    category: string,
    desc: string,
    discount: number,
    img1: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}
const kami = reactive<{
    category: string,
    search: string
}>({
    category: '',
    search: ''
})
const list = reactive<IGoods[]>([]);
const seaGood = ()=>{
    loading.value = true

service({
    
    url:'/pro/searchPro',
    method:'post',
    data:`category=${kami.category}&search=${kami.search}`
}).then(res=>{
    if(res.data.code === '200'){
    loading.value = false
        list.length = 0
        list.push(...res.data.data)
    }
})
}
const swits = (val: string, proid: string, type: string) => {
    // console.log(val, proid, type)s
    service({
        url: '/pro/updateFlag',
        method: 'post',
        data: {
            proid: proid,
            type: type,
            flag: val
        }
    }).then(res => {
        if (res.data.code === '200') {
      console.log('更新成功')

            // allIn()
        }
    })
}
seaGood()
</script>
<style scoped>
.img {
    width: 100px;
    height: 75px;
}
</style>